<template>
  <div>
    <Header></Header>
    <div>
      <group>
        <x-button type="primary" @click.native="showPrompt">申请笔名</x-button>
      </group>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/commons/header/header'
import Footer from '@/components/commons/footer/footer'
import userController from '@/api/userController/index'
import USER from '@/utils/user'
  export default {
      name: 'penName',
       data(){
        return {
          userInfo: null
        }
      },
      components:{Header, Footer},
      created(){
        this.getLoginInfo();
      },
      methods:{
        getLoginInfo(){ //获取登录信息,如果登录，重定向至登录页面
          var loginInfo = USER.getUserInfo();
          this.userInfo = loginInfo;
          if(loginInfo.isLogin==1){ //0已登录 1未登录
            this.$router.push({name:'login'})
          }
          if(loginInfo.userCustominfo5){ //如果是作者，跳转至作者中心
            this.$router.push({name:'authorCenter'});
          }
        },
        showPrompt(){
          var _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向
          this.$vux.confirm.show({
            title:'提示',
            theme:'android',
            placeholder:'请输入笔名',
            showInput:true,
            onConfirm (value) {
              var userCustominfo5 = value;//笔名
              var fromData = {
                userId:_this.userInfo.userId,
                userCustominfo5:userCustominfo5
              }
              //用户确认弹框
              var that = _this;
              that.$vux.confirm.show({
                title:'提示',
                theme:'android',
                content:'<div>是否使用“<i style="color:red;text-decoration:underline;">'+userCustominfo5+'</i>”为你的笔名,创建后将不可修改</div>',
                onConfirm () {
                  console.log(userCustominfo5)
                  //进行笔名验重
                  userController.checkAuthorName({userCustominfo5:fromData.userCustominfo5}).then(response=>{
                    console.log(response)
                  })
                  //笔名创建
                  userController.createAuthor(fromData).then(response=>{
                      //  笔名创建成功跳转至作者中心
                      if(response.success){
                         this.$vux.toast.show({
                          text: response.msg,
                          type:'success'
                        })
                        this.$router.push({name:'authorCenter'})
                      }
                  })
                }
              })

            }
          })
        }
      },
  }
</script>

<style scoped>
  .author_name{
    font-size: 16px;
    color: #666;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height:50px;
    max-width: 200px;
    margin-right: 0.5em;
  }
  .author_info {
    font-size: 12px;
    color: #B7B7B7;
    line-height:50px;
    display: inline-block;
    vertical-align: middle;
  }
</style>
